<!--
 * @Description: ...
 * @Author: yangli 121029539@qq.com
 * @Date: 2025-01-18 09:20:44
 * @LastEditTime: 2025-02-14 14:06:18
 * @LastEditors: yangli 121029539@qq.com
 * @FilePath: \pc\pages\index.vue
-->
<template>
    <div class="page-home">
        <div class="page-top ">
            <img src="@/assets/images/bg/bg0.png" alt="" class="object-cover w-full h-[240px]" />
        </div>
       <el-row :gutter="10" class="bg-[#f1f1f1]">
            <el-col v-for="(item,index) in topList" :key="index"
             :span="6" :xs="12" :sm="12" :md="12" :lg="6" :xl="6">
               <div class=" flex items-center justify-center py-[10px]"
                 :class="{
                    'border-solid border-0 border-r border-[#ccc]': index != topList.length-1,
                }"
               >
                    <div class="text-3xl text-[#666]">
                        <div>{{item.number}}+</div>
                         <!-- <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" /> -->
                        <div>{{item.title}}</div>
                    </div>
                    <div class="w-[100px] pl-[10px]">
                        <img src="@/assets/images/icon/icon_wx.png" alt="" class="w-[80px]" />
                    </div>
               </div>
            </el-col>
       </el-row> 
       <!-- 产品特色 -->
       <div class="">
            <div class="title pt-[60px] pb-[20px] text-center text-primary text-[32px]">产品特色</div>
            <div class="text-center " >
                 <span class="inline-block text-[#2b2b2b] pb-[10px] border-solid border-0 border-b border-primary text-[28px]"> Product Features</span>
            </div>
            <div class="py-[30px]">
                <el-row :gutter="10" >
                    <el-col :md="{ span: '24-5', offset: 0  }" :xs="{ span: 8, offset: 0 }"
                           :lg="{ span: '24-5', offset: 0  }"  :sm="{ span: 8, offset: 0 }">
                         <div class="flex flex-col items-center justify-center ">
                            <div class="feature-item w-[120px] h-[120px]  sm:w-[180px] sm:h-[180px]   flex flex-col items-center  justify-center border-solid border-[4px]   border-primary rounded-full "
                            >
                                    <div> <img :src="featureList[0].icon" alt="" class="w-[80px]" /></div>
                                    <div class="text-[14px] sm:text-[28px]  text-primary pt-[5px] item-text">{{featureList[0].title}}</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :md="{ span: '24-5', offset: 0  }" :xs="{ span: 8, offset: 0 }"
                           :lg="{ span: '24-5', offset: 0  }"  :sm="{ span: 8, offset: 0 }">
                         <div class="flex flex-col items-center justify-center ">
                            <div class="feature-item w-[120px] h-[120px]  sm:w-[180px] sm:h-[180px]  flex flex-col items-center  justify-center border-solid border-[4px]   border-primary rounded-full "
                            >
                                    <div> <img :src="featureList[1].icon" alt="" class="w-[80px]" /></div>
                                    <div class="text-[14px] sm:text-[28px]  text-primary pt-[5px]  item-text">{{featureList[1].title}}</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :md="{ span: '24-5', offset: 0  }"  :xs="{ span: 8, offset: 0 }"
                           :lg="{ span: '24-5', offset: 0  }"  :sm="{ span: 8, offset: 0 }">
                         <div class="flex flex-col items-center justify-center ">
                            <div class="feature-item w-[120px] h-[120px]  sm:w-[180px] sm:h-[180px]  flex flex-col items-center  justify-center border-solid border-[4px]   border-primary rounded-full "
                            >
                                    <div> <img :src="featureList[2].icon" alt="" class="w-[80px]" /></div>
                                    <div class="text-[14px] sm:text-[28px]  text-primary pt-[5px]  item-text">{{featureList[2].title}}</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :md="{ span: '24-5', offset: 0  }"   :xs="{ span: 6, offset: 5}"
                           :lg="{ span: '24-5', offset: 0  }"   :sm="{ span: 6, offset: 5 }">
                         <div class="flex flex-col items-center justify-center ">
                            <div class="feature-item w-[120px] h-[120px]  sm:w-[180px] sm:h-[180px]  flex flex-col items-center  justify-center border-solid border-[4px]   border-primary rounded-full "
                            >
                                    <div> <img :src="featureList[3].icon" alt="" class="w-[80px]" /></div>
                                    <div class="text-[14px] sm:text-[28px]  text-primary pt-[5px]  item-text">{{featureList[3].title}}</div>
                            </div>
                        </div>
                    </el-col>
                    <el-col :md="{ span: '24-5', offset: 0  }"   :xs="{ span: 6, offset: 3 }"
                           :lg="{ span: '24-5', offset: 0  }"   :sm="{ span: 6, offset: 3 }">
                         <div class="flex flex-col items-center justify-center">
                            <div class="feature-item w-[120px] h-[120px]  sm:w-[180px] sm:h-[180px]  flex flex-col items-center  justify-center border-solid border-[4px]   border-primary rounded-full "
                            >
                                    <div> <img :src="featureList[4].icon" alt="" class="w-[80px]" /></div>
                                    <div class="text-[14px] sm:text-[28px]  text-primary pt-[5px]  item-text">{{featureList[4].title}}</div>
                            </div>
                        </div>
                    </el-col>
                </el-row> 
            </div>
        </div>
        <!-- 产品介绍 -->
        <div class="">
             <div class="title pt-[60px] pb-[20px] text-center text-primary text-[32px]">产品介绍</div>
            <div class="text-center " >
                 <span class="inline-block text-[#2b2b2b] pb-[10px] border-solid border-0 border-b border-primary text-[28px]"> Product introduction</span>
            </div>
            <div class="py-[30px]">
                 <el-carousel  arrow="always">
                    <el-carousel-item v-for="item in 4" :key="item">
                        {{item}}
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
        <div class="grid gap-4 md:grid-cols-2 grid-cols-1 bg-white">
            <div class="flex justify-center p-4">
                 <img src="http://www.asdaibao.cn/images/index/t1.jpg" alt="" class="w-[308px] h-[308px]" />
            </div>
            <div class="flex justify-start xs:justify-center sm:justify-center p-4">
                  <div class="w-[500px] ">
                    <div class=" pt-[60px]  pb-[20px] text-center text-primary text-[28px]">我们为上千家客户提供手机保障服务</div>
                    <div class="text-center " >
                        <span class="inline-block text-[#2b2b2b] pb-[10px] border-solid border-0 border-b border-primary text-[28px]"> Security of Services</span>
                    </div>
                    <div class="leading-loose mt-[40px] mb-[100px] text-[18px]"> 
            目前手机品牌集中度不断提高，运营商补贴缩水，运营成本上涨，手机连锁销售店面的运营压力不断增加，扩充盈利来源，成为改善经营的有效措施之一。而手机保障具备的高毛利、需求强、成长空间大等特点，成为增加连锁店面盈利的有效措施之一。
        </div>
                    <div class="flex justify-end ">
                        <span  class="inline-block bg-[#4c85b7] py-[8px] px-[10px] text-[#fff] text-[14px] rounded-[6px]">
            合作模式：引流合作
        </span>
                    </div>
                 </div>   
            </div>
        </div>
         <div class="grid gap-4 md:grid-cols-2 grid-cols-1 bg-white">
            <div class="flex justify-center p-4">
                  <div class="w-[500px] ">
                    <div class=" pt-[60px]  pb-[20px] text-center text-primary text-[28px]">我们为上千家客户提供手机保障服务</div>
                    <div class="text-center " >
                        <span class="inline-block text-[#2b2b2b] pb-[10px] border-solid border-0 border-b border-primary text-[28px]"> Security of Services</span>
                    </div>
                    <div class="leading-loose mt-[40px] mb-[100px] text-[18px]"> 以创新互联网保障服务为主的爱保科技，一直以来致力于用户场景需求的研究与探索，通过挖掘不同的消费场景不断开发新的保障服务产品，这与联通众筹6.0的理念不谋而合。
                    凭借着产品创新、服务创新、技术创新等方面的优势，爱保科技最终成为联通动能和创新类众筹产品合作伙伴。 
                    最终，爱保科技获得了”联通众筹6.0全国合作伙伴“的授权牌，并分别与广东、天津等多个省市的联通公司签署了合作协议。</div>
                    <div class="flex justify-end ">
                        <span  class="inline-block bg-[#4c85b7] py-[8px] px-[10px] text-[#fff] text-[14px] rounded-[6px]">合作模式：行业定制</span>
                    </div>
                 </div>   
            </div>
             <div class="flex justify-start xs:justify-center sm:justify-center p-4">
                 <img src="http://www.asdaibao.cn/images/index/T2.jpg" alt="" class="w-[308px] h-[308px]" />
            </div>
        </div>


     




      

    </div>
   
</template>
<script lang="ts" setup>
import { useAppStore } from '~~/stores/app'
const appStore = useAppStore()
const topList = [
    {
        number:8000,
        title:'合作商户'
    },
     {
        number:2000,
        title:'维修网点'
    },
     {
        number:30000,
        title:'服务人群'
    },
     {
        number:23000,
        title:'修复手机'
    }
]
const featureList = [
    {
        title:'互联网',
        icon:'http://www.asdaibao.cn/images/index/hlw.png'
    },
    {
        title:'大数据',
        icon:'http://www.asdaibao.cn/images/index/dsj.png'
    },
    {
        title:'定制化',
        icon:'http://www.asdaibao.cn/images/index/dzh.png'
    },
    {
        title:'AI',
        icon:'http://www.asdaibao.cn/images/index/AI.png'
    },
    {
        title:'全覆盖',
        icon:'http://www.asdaibao.cn/images/index/qfg.png'
    }
]
const introductionList = [
    {
        icon:'',
        title:'碎屏保',
         subTitle:'意外碎屏',
        subText:'免费换新屏',
        id:1
    },
    {
        icon:'',
        title:'换新保',
         subTitle:'有保无忧',
        subText:'可换可修',
        id:1
    },
     {
        icon:'',
        title:'电池保',
         subTitle:'手机待机不足24小时?',
        subText:'免费换新电池！',
        id:1
    },
    {
        icon:'',
        title:'延保',
         subTitle:'三包服务到期',
        subText:'延长保修一年',
        id:1
    },
     {
        icon:'',
        title:'数据保',
        subTitle:'手机重要数据丢失',
        subText:'权威机构安全恢复',
        id:1
    },
    {
        icon:'',
        title:'双面保',
         subTitle:'前屏后盖都能保',
        subText:'意外碎屏免费换',
        id:1
    },
    {
        icon:'',
        title:'意外保',
         subTitle:'手机发生意外厂家不保修？',
        subText:'一年内免费维修',
        id:1
    },
    {
        icon:'',
        title:'碎后保',
         subTitle:'碎屏维修后',
        subText:'也能购买碎后保',
        id:1
    }
]




</script>
<style lang="scss" scoped>
.feature-item:hover{
    background: linear-gradient(to top, rgb(54, 87, 204), rgb(84, 203, 229)) white;
    border: none;
    box-shadow: rgb(136, 136, 136) 0px 10px 10px;
    border-radius: 100%;
    .item-text{
        color: #fff;
    }
}
</style>
